import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Modal } from 'antd-mobile';
import { ToastTips } from '../../../../../common/toastTips/tosat';
import content from '../../../common/contentCss/content.css';
import styles from './common.css';
import CustTitle from '../../../common/title/title';
import SetWorkExperience from './pages/setWorkExperience';
import DeleteBtnAlert from '../../../../../common/alert/deleteBtnAlert/deleteBtnAlert';

const alert = Modal.alert;

function Index({dispatch,setWorkExperience,personal}) {

  // console.log('profile', JSON.stringify(profile));
  const { id, entryTime,dimissionTime,workCompany,
    workPost, description,pageStatus} = setWorkExperience;

  let titleProps = '';
  if(pageStatus == 'edit'){
    titleProps = {
      titleName:'工作经历',
      showSaveBtnStatus:true,
      saveBtnName:'修改',
      goBack(){
        dispatch(routerRedux.goBack())
      },
      onSave(){
        if(validataInfo()){
          dispatch({
            type:'setWorkExperience/editWorkExperienceInfo',
          })
        }
      }
    }
  }else{
    titleProps = {
      titleName:'工作经历',
      showSaveBtnStatus:true,
      saveBtnName:'保存',
      goBack(){
        dispatch(routerRedux.goBack())
      },
      onSave(){
        if(validataInfo()){
          dispatch({
            type:'setWorkExperience/addWorkExperienceInfo',
          })
        }
      }
    }
  }

  function validataInfo (){

    if(!entryTime){
      ToastTips('请选择入职时间', 2000, null);
      return false;
    }
    if(!dimissionTime){
      ToastTips('请选择离职时间', 2000, null);
      return false;
    }
    if(!workCompany){
      ToastTips('请填写工作公司', 2000, null);
      return false;
    }
    if(!workPost){
      ToastTips('请填写工作岗位', 2000, null);
      return false;
    }
    // if(!description){
    //   ToastTips('请填写工作描述', 2000, null);
    //   return false;
    // }
    return true;
  }

  const MarginHeight = () => <div style={{height: '0.6em', backgroundColor:'#F5F5F9'}}></div>;

  const workExperienceProps = {
    id,
    pageStatus,
    entryTime,
    dimissionTime,
    workCompany,
    workPost,
    description,
    saveEntryTime(value){
      // console.log('入职时间', value);
      dispatch({
        type:'setWorkExperience/querySuccess',
        payload:{
          entryTime:value,
        }
      })
    },
    saveDimissionTime(value){
      // console.log('离职时间', value);
      dispatch({
        type:'setWorkExperience/querySuccess',
        payload:{
          dimissionTime:value,
        }
      })
    },
    saveWorkCompany(value){
      // console.log('工作公司', value);
      dispatch({
        type:'setWorkExperience/querySuccess',
        payload:{
          workCompany:value,
        }
      })
    },
    saveWorkPost(value){
      // console.log('工作岗位', value);
      dispatch({
        type:'setWorkExperience/querySuccess',
        payload:{
          workPost:value,
        }
      })
    },
    saveDescription(value){
      // console.log('工作描述', value);
      dispatch({
        type:'setWorkExperience/querySuccess',
        payload:{
          description:value,
        }
      })
    },
    onDelete(){
      showDeleteTipsAlert(id);
    }
  }

  const showDeleteTipsAlert =(id)=>{
    let isDeleteAlert;
    const isDeleteProps={
      tipsContent:'确定删除此工作经历信息吗？',
      okClick(){
        console.log('ok');
        dispatch({
          type:'setWorkExperience/deleteWorkExperience',
          payload:{
            id,
          }
        })
        isDeleteAlert.close();
      },
      cancelClick(){
        isDeleteAlert.close();
      },
    }
    return (
      isDeleteAlert = alert('', <DeleteBtnAlert {...isDeleteProps}/>, [])
    )
  }

  return(
    <div className={content.content}>
      <CustTitle {...titleProps}/>
      <div style={{
        marginTop: '2.8125em',
      }}>
        <SetWorkExperience {...workExperienceProps}/>
      </div>
    </div>
  )
}

function mapStateToProps(state, ownProps) {
  return {
    personal: state.personal,
    setWorkExperience: state.setWorkExperience
  }
}

export default connect(mapStateToProps)(Index);
